<template>
  <div>
    <span @click="isOpenChildren=!isOpenChildren" class="isOpenChildren">{{isOpenChildren?"-":'+'}} {{data.cat_name}}</span>
    <list v-if="isOpenChildren" :data="data"></list>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { State } from '@/store/categories/interface'
import List from '@/components/categories/list.vue'
@Component({
  name: 'Children',
  // eslint-disable-next-line no-use-before-define
  components: { List, Children }
})
export default class Children extends Vue {
  @Prop({ default: 0 })
  public data?:State

  private isOpenChildren = false
}
</script>

<style scoped>

</style>
